<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>主页</title>
    <script src="jquery.min.js"></script>

    <script type="text/javascript">

        var ws ;

        function connect(){
            ws = new WebSocket("ws://"+window.location.host+"/websocket?user_name="+$("#user-name").val());
            ws.onopen = function()
            {
            };
            ws.onmessage = function(evt)
            {
                var data = JSON.parse(evt.data);
                $("#receiveMsg").val($("#receiveMsg").val()+ "接收消息------>"+data.sender+"--->:"+data.message+"\r\n");
            };

        }

        function send() {
            var object = new Object();
            object.sender = $("#user-name").val();
            object.receiver = $("#receiver").val();
            object.message = $("#message").val();
            ws.send(JSON.stringify(object));
            $("#receiveMsg").val($("#receiveMsg").val()+ "发送消息------>"+ $("#receiver").val()+"--->:"+$("#message").val()+"\r\n");
        }

    </script>
</head>
<body>
<h1>Welcome Body!</h1>
用户名:<input type="text" id="user-name"/> <input type="button" value="连接" onclick="connect()"/>
<br/>
发送消息:<br/>
接受者:<input type="text" id="receiver" /><br/>
消息:<input type="text" id="message"/><br/>
<input type="button" value="发送" onclick="send()"/>
<br/>
<br/>
接受消息:<br/>
<textarea id="receiveMsg" style="height: 250px;width: 800px;" readonly="true"></textarea>

</body>
</html>